'use client'
import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function ParallelLayout({
  children,
  team,
  school,
}: Readonly<{
  children: React.ReactNode
  team: React.ReactNode
  school: React.ReactNode
}>) {
  const pathName = usePathname()
  
  // 当前路径高亮
  const handleActive = (path: string) => {
    return pathName === path ? 'text-blue-400 underline' : ''
  }
  
  return (
    <div className="container">
      <div className="flex justify-center items-center gap-6 text-blue-300">
        <Link href={'/'} className={handleActive('/')}>Home</Link>
        <Link href={'/parallelRoutes'} className={handleActive('/parallelRoutes')}>Parallel</Link>
        <Link href={'/parallelRoutes/class'} className={handleActive('/parallelRoutes/class')}>Class</Link>
      </div>
      <div className="flex gap-3 my-3">
        {team}
        {school}
      </div>
      <div className="flex items-center bg-blue-500 rounded-2xl px-2 py-6">
        {children}
      </div>
    </div>
  )
}
